<template lang="html">
    <div :id="id" v-html="inputContent" @input="outputContent" class="editor"></div>
</template>

<script>
import WangEditor from 'wangeditor'
// import indentJs from './wang-indent.js'
// import clearIndentJs from './clear-indent.js'
export default {
    props: ['inputContent', 'uploadUrl', 'id'],
    data() {
        return {
            content: ''
        }
    },
    mounted() {
        this.createEditor();
    },
    methods: {
        createEditor() {
            const self = this
            console.log("create!!!!!!!", this.id);
            const editor = new WangEditor(this.id)
            // 取消粘贴过滤
            editor.config.pasteFilter = false;
            // , 'eraser' 注释掉
            editor.config.menus = ['source', '|', 'bold', 'underline', 'italic', 'strikethrough', 'forecolor', 'bgcolor', '|', 'quote', 'fontfamily', 'fontsize', 'head', 'unorderlist', 'orderlist', 'alignleft', 'aligncenter', 'alignright',
                '|', 'link', 'unlink', 'table', 'img', 'video', 'insertcode', '|', 'undo', 'redo', 'fullscreen'
            ]
            editor.config.uploadImgUrl = this.uploadUrl
            editor.onchange = function() {
                self.formatContent(this.$txt.html())
            }
            editor.create()
        },
        formatContent(content) {
            // handle
            // ...
            this.content = content;
            this.outputContent();
        },
        outputContent() {
            this.$emit('input', this.content)
        }
    },
    components: {}
}
</script>

<style lang="css" scoped>
    .editor{
        height: 500px;
    }
    .wangEditor-container{
        border-radius: 2px;
        overflow: hidden;
        border: 1px solid #CCC;
    }
</style>